<template>
  <div class="wrap">
    <!--顶部-->
    <div class="top">
      <div class="hosname">{{ workData?.baseMap.hosname }}</div>
      <div class="line"></div>
      <div>{{workData?.baseMap.bigname}}</div>
      <div class="dot">.</div>
      <div class="department">{{workData?.baseMap.depname}}</div>
    </div>
    <!--中间-->
    <div class="center">
      <h1 class="time">{{workData?.baseMap.workDateString}}</h1>
      <div class="container">
        <div :class="{ active: item.status == -1 || item.availableNumber == -1,cur: item.workDate == workTime.workDate }"
             class="item" v-for="item in workData?.bookingScheduleList"
             @click="changeWorkTime(item)"
             :key="item.workDate">
          <div class="item_top">{{item.workDateMd}}  {{item.dayOfWeek}}</div>
          <div class="item_bottom">
            <div v-if="item.status === -1">停止挂号</div>
            <div v-else-if="item.status === 0">
              {{item.availableNumber === -1 ?'约满了':`有号(${item.availableNumber})`}}
            </div>
            <div v-else>即将放号</div>
          </div>
        </div>
      </div>
      <el-pagination layout="prev,pager,next" :total="totalPage" @current-change="changePageNo"/>
    </div>
    <!--底部-->
    <div class="bottom">
      <!--即将放号-->
      <div class="will" v-if="workTime.status==1">
        <span class="time">{{workTime.workDate}}</span>
        <span class="willText">放号</span>
      </div>
      <!--有号或无号-->
      <div class="doctor" v-else>
        <!--上午-->
        <div class="morning">
          <div class="tip">
            <svg t="1730425880265" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4309" width="16" height="16"><path d="M248.973151 742.414079l-97.735913 97.735914a23.038848 23.038848 0 0 0 32.561572 32.561571l97.787111-97.889505a23.038848 23.038848 0 1 0-32.561572-32.561572zM186.153892 512.025599a21.963702 21.963702 0 0 0-23.294835-23.294836H23.243638a23.294835 23.294835 0 0 0 0 46.538474h139.615419A21.963702 21.963702 0 0 0 186.0003 512.025599z m588.770562-230.388481l97.735913-97.735913a23.038848 23.038848 0 1 0-32.561572-32.561572L742.362882 249.024349a23.038848 23.038848 0 0 0 32.561572 32.561572zM511.974401 186.051497a21.963702 21.963702 0 0 0 23.294836-23.294835V23.294835a23.294835 23.294835 0 0 0-46.538474 0v139.615419a21.963702 21.963702 0 0 0 23.243638 23.141243zM248.973151 281.637118a23.038848 23.038848 0 0 0 32.561572-32.561572L183.79881 148.984551a23.038848 23.038848 0 0 0-32.561572 32.561572z m751.680816 207.093645h-139.615419a23.294835 23.294835 0 1 0 0 46.538474h139.615419a23.294835 23.294835 0 1 0 0-46.538474zM774.770861 742.414079a23.038848 23.038848 0 1 0-32.561571 32.561572l97.735913 97.735913a23.038848 23.038848 0 1 0 32.561572-32.561571zM511.820809 232.743563A279.282036 279.282036 0 1 0 791.102845 512.025599 280.101195 280.101195 0 0 0 511.974401 232.743563z m0 511.974401A232.692365 232.692365 0 1 1 744.513174 512.025599 233.40913 233.40913 0 0 1 511.974401 744.717964z m0 93.076946a21.963702 21.963702 0 0 0-23.294835 23.294836v139.615419a23.294835 23.294835 0 1 0 46.538473 0v-139.615419a21.963702 21.963702 0 0 0-23.090046-23.294836z" fill="#1296db" p-id="4310"></path></svg>
            <span class="tip-text">上午号源</span>
          </div>
          <!--每个医生信息-->
          <div class="doc_info" v-for="item in morningArr" :key="item.id">
            <div class="left">
              <div class="info">
                <span>{{item.title}}</span>
                <span>|</span>
                <span>{{item.docname}}</span>
              </div>
              <div class="skill">
                {{item.skill}}
              </div>
            </div>
            <div class="right">
              <div class="money">
                ￥{{item.amount}}
              </div>
              <el-button type="primary"  @click="toStep2(item)">{{item.availableNumber}}</el-button>
            </div>
          </div>
        </div>
        <!--下午-->
        <div class="afternoon">
          <div class="tip">
            <svg t="1730425977076" class="icon" viewBox="0 0 1455 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5619" width="16" height="16"><path d="M26.947368 242.526316h215.578948c4.931368 132.042105 46.484211 266.778947 134.736842 361.094737a450.452211 450.452211 0 0 0 157.210947 110.48421 481.738105 481.738105 0 0 0 386.317474 0 450.452211 450.452211 0 0 0 157.210947-110.48421c88.198737-94.315789 129.751579-229.052632 134.736842-361.094737h215.578948a26.947368 26.947368 0 0 0 0-53.894737H26.947368a26.947368 26.947368 0 1 0 0 53.894737z m700.631579 458.105263c-233.606737 0-420.702316-212.884211-431.157894-458.105263h862.315789c-10.455579 245.221053-197.551158 458.105263-431.157895 458.105263zM379.580632 53.894737h695.996631a26.947368 26.947368 0 1 0 0-53.894737H379.580632a26.947368 26.947368 0 1 0 0 53.894737zM727.578947 778.778947a29.642105 29.642105 0 0 0-29.372631 29.642106v185.936842a29.372632 29.372632 0 1 0 58.745263 0V808.421053A29.642105 29.642105 0 0 0 727.578947 778.778947z m419.43579-137.431579a30.693053 30.693053 0 0 0-41.525895 0 28.025263 28.025263 0 0 0 0 40.421053l132.931369 132.042105a30.746947 30.746947 0 0 0 41.552842 0 28.025263 28.025263 0 0 0 0-40.421052z m-792.629895-8.08421a29.345684 29.345684 0 0 0-20.776421 8.08421l-132.958316 132.042106a28.025263 28.025263 0 0 0 0 40.421052 30.746947 30.746947 0 0 0 41.552842 0l132.958316-132.042105a28.079158 28.079158 0 0 0 0-40.421053 29.453474 29.453474 0 0 0-20.776421-8.08421z" fill="#1296db" p-id="5620"></path></svg>
            <span class="tip-text">下午号源</span>
          </div>
          <!--每个医生信息-->
          <div class="doc_info" v-for="item in afterArr" :key="item.id" >
            <div class="left">
              <div class="info">
                <span>{{item.title}}</span>
                <span>|</span>
                <span>{{item.docname}}</span>
              </div>
              <div class="skill">
                {{item.skill}}
              </div>
            </div>
            <div class="right">
              <div class="money">
                ￥{{item.amount}}
              </div>
              <el-button type="primary" @click="toStep2(item)">{{item.availableNumber}}</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">

import {computed, onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {reqHospitalDoctor, reqHospitalWork} from "@/api/hospital";
import {Doctor, HospitalWork, HospitalWorkResponseData} from "@/api/hospital/type.ts";
const $route = useRoute()
const $router = useRouter()
const pageNo = ref<number>(1);
const pageSize = ref<number>(5);
const totalPage = ref<number>(0);
const workData = ref<HospitalWork>();
//存储当前日期
const workTime = ref<any>({})
//排班医生的数据
const docArr = ref<Doctor[]>([])
onMounted(async ()=>{
  await fetchWorkData()
})
const fetchWorkData = async () => {
  const result:HospitalWorkResponseData = await reqHospitalWork(pageNo.value, pageSize.value,$route.query.hoscode as string,$route.query.depcode as string)
  if(result.code === 200){
    workData.value = result.data
    totalPage.value = result.data.total
    //存储第一天的日期数据
    workTime.value = result.data.bookingScheduleList[0]
    await getDoctorWorkData()
  }
}
//获取医生排班数据
const getDoctorWorkData = async () => {
  const hoscode:string = $route.query.hoscode as string;
  const depcode:string = $route.query.depcode as string;
  const workDate:string = workTime.value.workDate;
  const result = await reqHospitalDoctor(hoscode,depcode,workDate)
  console.log('排班医生',result.data)
    docArr.value = result.data

}
const changeWorkTime = (item:any)=>{
  workTime.value = item;
  getDoctorWorkData()
}
//上午排班数据
const morningArr = computed(()=>{
  return docArr.value.filter(item => item.workTime === 0)
})
//下午排班数据
const afterArr = computed(()=>{
  return docArr.value.filter(item => item.workTime === 0)
})
//跳转就诊人页面
const toStep2 = (doctor:Doctor)=>{
  $router.push({
    path:'/hospital/register_step2',
    query:{
      docId: doctor.id,
      hoscode: $route.query.hoscode
    }
  })
}

const changePageNo = (currentPage: number) => {
  console.log(currentPage)
  pageNo.value = currentPage;
  fetchWorkData()
}
</script>

<style scoped lang="scss">
.wrap{
  .top{
    display: flex;
    color: #7f7f7f;
    .line{
      width: 2px;
      height:17px;
      background-color: #7f7f7f;
      margin: 0 5px;
    }
    .dot{
      margin: 0 5px;
    }
  }
  .center{
    margin: 20px 0;
    display: flex;

    width: 100%;
    flex-direction: column;
    align-items: center;
    .time{
      font-weight: 900;
    }
    .container{
      margin: 30px 0;
      width: 100%;
      display: flex;
      justify-content: center;
      .item{
        flex: 1;
        border: skyblue solid 1px;
        margin: 0 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        //过渡动画
        transition: all 0.5s;
        &.active{
          border: 1px solid #ccc;
          color: #7f7f7f;
          .item_top{
            background-color: #cccccc;
          }
        }
        &.cur{
          border: 2px solid #55a6fe;
          //放大
          transform: scale(1.1);
          box-shadow: 2px 4px 5px #55a6fe;
        }
        .item_top{
          height: 30px;
          line-height: 30px;
          width: 100%;
          text-align: center;
          background-color: lightskyblue;
        }
        .item_bottom{
          height: 60px;
          line-height: 60px;
          text-align: center;

        }
      }
    }
  }
  .bottom{
    .will{
      text-align: center;
      font-size: 20px;
      font-weight: 900;
      .time{
        color: orangered;
      }
      .willText{
        color: #55a6fe;
      }
    }
    .doctor{
      .morning,.afternoon{
        margin-top: 20px;
        .tip{
          display: flex;
          align-items: center;
          .tip-text{
            margin-left: 5px;
            color: #7f7f7f;
            font-weight: 900;
          }
        }
      }

      .doc_info{
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        border-bottom: 1px solid #ccc;
        .left{
          .info{
            color: skyblue;
            span{
              margin-right: 5px;
              font-size: 16px;
              font-weight: 900;
            }
          }
          .skill{
            margin: 10px 0;
            color: #7f7f7f;
          }
        }
        .right{
          width: 150px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .money{
            color: #7f7f7f;
            font-weight: 900;
          }
        }
      }
    }
  }
}
</style>
